<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

		<script
			type="text/javascript"
			src="../build/bower_components/promise-polyfill/promise.js"
		></script>

		<script
			type="text/javascript"
			src="../build/bower_components/custom-event-polyfill/custom-event-polyfill.js"
		></script>

		<script
			id="conversational-form-development" 
			type="text/javascript"
			src="../build/cf/ConversationalForm.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/parsing/TagsParser.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ConversationalForm.plugin.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/Helpers.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/EventDispatcher.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/interfaces/IUserInterfaceOptions.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/BasicElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/ControlElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/ControlElements.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/ScrollController.js"
		></script>

		<script 
			type="text/javascript"
			src="../build/cf/data/Dictionary.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/Tag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/TagGroup.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/InputTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/CfRobotMessageTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/SelectTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/ButtonTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/form-tags/OptionTag.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/Button.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/RadioButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/CheckboxButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/OptionButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/OptionsList.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/control-elements/UploadFileUI.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/interfaces/IUserInput.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/interfaces/IUserInputElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/inputs/UserInputElement.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/inputs/UserTextInput.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/MicrophoneBridge.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/inputs/UserInputSubmitButton.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/chat/ChatResponse.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/ui/chat/ChatList.js"
		></script>

		<script
			type="text/javascript"
			src="../build/cf/logic/FlowManager.js"
		></script>

		<link type="text/css" rel="stylesheet" href="../build/conversational-form.css"/>

	</head>
	
	
	<body>
			
				<form id="cf-form">
						<input type="text" name="CHEESE" value="comte" cf-questions="What is your fave cheese?">
					  <!-- <label for="radio">
					    <input cf-questions="Hi friend. Ready to signup for our demo newsletter?" cf-label="Yes, let's begin!" type="radio" value="0">
					    Start
					  </label> -->
					  <cf-robot-message cf-questions="this is just a test message to show that the next question will be skipped when trying to edit the first question."></cf-robot-message>
					  <input type="text" name="FNAME" cf-questions="What is your firstname?">
					  <input type="text" name="LNAME" cf-questions="What is your lastname?">
					  <input type="text" name="EMAIL" cf-questions="What is your email?">
					
				</form>

			<div id="cf-context" role="cf-context" cf-context style="height: 600px; width: 400px; border: 1px solid #999;">
				
			</div>

		<script>
		    window.onload = function(){
		        var conversationalForm = window.cf.ConversationalForm.startTheConversation({
		            formEl: document.getElementById("cf-form"),
		            context: document.getElementById("cf-context"),
		            // hideUserInputOnNoneTextInput: true,
		            userInterfaceOptions:{
	            		controlElementsInAnimationDelay: 250,
	            		robot: {
	            			robotResponseTime: 0,
	            			chainedResponseTime: 600
	            		}
	            	}
		        });
		    };
		</script>
	</body>

</html>